<template>
  <view class="product-card" @click="onCardClick">
    <view class="image-container">
      <image class="image" :src="product.images[0]" mode="aspectFill"></image>
    </view>
    <view class="content">
      <view class="title">{{ product.name }}</view>
      <view class="info">
        <view class="price-wrapper">
          <text class="price">{{ product.price }}</text>
          <text class="original-price" v-if="product.originalPrice">{{ product.originalPrice }}</text>
        </view>
        <text class="sales">销量 {{ formatNumber(product.sales) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { formatNumber } from '../utils/common.js';

export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatNumber,
    onCardClick() {
      this.$emit('click', this.product);
      uni.navigateTo({
        url: `/pages/product/detail?id=${this.product.id}`
      });
    }
  }
};
</script>

<style lang="scss">
@import '../styles/variables.scss';
@import '../styles/mixins.scss';

.product-card {
  background-color: #fff;
  border-radius: $border-radius-base;
  overflow: hidden;
  box-shadow: $box-shadow-light;
  margin-bottom: $spacing-base;
  
  .image-container {
    width: 100%;
    height: 300rpx;
    background-color: $bg-color-light;
    overflow: hidden;
    
    .image {
      width: 100%;
      height: 100%;
    }
  }
  
  .content {
    padding: $spacing-base;
    
    .title {
      font-size: $font-size-md;
      font-weight: bold;
      color: $text-color-primary;
      @include text-ellipsis-multi(2);
      margin-bottom: $spacing-xs;
      line-height: 1.3;
      height: 2.6em;
    }
    
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: $spacing-xs;
      
      .price-wrapper {
        display: flex;
        align-items: center;
        
        .price {
          color: $primary-color;
          font-weight: bold;
          font-size: $font-size-lg;
          
          &::before {
            content: '¥';
            font-size: 80%;
            margin-right: 2rpx;
          }
        }
        
        .original-price {
          color: $text-color-placeholder;
          text-decoration: line-through;
          font-size: $font-size-sm;
          margin-left: $spacing-xs;
          
          &::before {
            content: '¥';
            font-size: 80%;
            margin-right: 2rpx;
          }
        }
      }
      
      .sales {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
    }
  }
}
</style> 